<template>
   <!-- 表格 -->
<div class="tableList">
   <!--查询表单-->
<el-card class="operate-container" shadow="never">
  <el-form :inline="true" class="demo-form-inline">
  <el-form-item label="名称">
    <el-input v-model="searchObj.name" placeholder="讲师名" /> 
  </el-form-item>

  <el-form-item label="头衔">
    <el-select v-model="searchObj.level" clearable placeholder="头衔">
      <el-option value="1" label="高级讲师"/>
      <el-option value="0" label="首席讲师"/>
    </el-select>
  </el-form-item>

  <el-form-item label="入驻时间">
    <el-date-picker
      v-model="searchObj.joinDateBegin"
      placeholder="开始时间"
      value-format="yyyy-MM-dd" />
  </el-form-item>
  <el-form-item label="-">
    <el-date-picker
      v-model="searchObj.joinDateEnd"
      placeholder="结束时间"
      value-format="yyyy-MM-dd" />
  </el-form-item>
    <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
    <el-button type="default" @click="resetData()">清空</el-button>
</el-form>
</el-card>
<!-- 工具按钮 -->
<el-card class="operate-container" shadow="never">
  <i class="el-icon-tickets" style="margin-top: 5px"></i>
  <span style="margin-top: 5px">数据列表</span>
  <el-button class="btn-add" @click="add()" style="margin-left: 10px;">添加</el-button>
  <el-button class="btn-add" @click="batchRemove()" >批量删除</el-button>
</el-card>

<!-- <-- 回显数据表格 --> 
<el-table
  :data="list"
  border
  stripe
  @selection-change="handleSelectionChange">
  <el-table-column type="selection"/>
  <el-table-column
    label="#"
    width="50">
    <template slot-scope="scope">
      {{ (page - 1) * limit + scope.$index + 1 }}
    </template>
  </el-table-column>
  <el-table-column prop="name" label="名称" width="80" />
  <el-table-column label="头衔" width="90">
    <template slot-scope="scope">
      <el-tag v-if="scope.row.level === 1" type="success" size="mini">高级讲师</el-tag>
      <el-tag v-if="scope.row.level === 0" size="mini">首席讲师</el-tag>
    </template>
  </el-table-column>
  <el-table-column prop="intro" label="简介" />
  <el-table-column prop="sort" label="排序" width="60" />
  <el-table-column prop="joinDate" label="入驻时间" width="160" />
  <el-table-column label="操作" width="200" align="center">
    <template slot-scope="scope">
      <el-button type="text" size="mini" @click="removeById(scope.row.id)">删除</el-button>
      <router-link :to="'/vod/teacher/edit/'+scope.row.id">
        <el-button type="text" size="mini">修改</el-button>
      </router-link>
    </template>
  </el-table-column>
</el-table>
 <!-- 分页组件 -->
 <el-pagination
    :current-page="page"
    :total="total"
    :page-size="limit"
    :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
    style="padding: 30px 0; text-align: center;"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="changePageSiz"
    @current-change="changeCurrentPag"
  />
</div>
 </template>
<script>
import teacherApi from '@/api/vod/teacher'
export default{
   data(){
     return{
         list:[],
         total:0,
         page:1,
         limit:10,
         searchObj:{},
         AllidList:[]

    }
   },
   created(){
     this.fetchData()  
   },
   methods:{
    batchRemove(){
       if(this.AllidList.length==0){
          this.$message.warning('请选择要删除的记录')
          return
       }
      this.$confirm('此操作将删除该讲师, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
      }).then(() => {
        var idlist=[]
        for(var a=0;a<this.AllidList.length;a++){
          var cj=this.AllidList[a]
          var id=cj.id
          idlist.push(id)
        }
       return teacherApi.AllidList(idlist)
        .then(response=>{
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
     this.fetchData
    });
   })
    },
    handleSelectionChange(Allid){
       this.AllidList=Allid
    },
    fetchData(){
       //ajax
       teacherApi.pageList(this.page,this.limit,this.searchObj)
       .then(response=>{
          this.list=response.data.records,
          this.total=response.data.total
       })
    },
    add(){
     this.$router.push({path:'/vod/teacher/create'})
    },
    //改变每页显示记录条数
    changePageSiz(size){
       this.limit=size,
       this.fetchData()
    },
    //改变页码数
    changeCurrentPag(page){
     this.page=page,                                                                         
     this.fetchData()
    },
    //清空的方法
    resetData(){
        this.searchObj={},
        this.fetchData()
    },
    //删除的方法
    removeById(id){
      this.$confirm('此操作将删除该讲师, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
     return teacherApi.removeTeacherById(id)
        .then(response=>{
         this.$message({
            type: 'success',
            message: '删除成功!'
      })
       this.fetchData
   });
//  }).catch(() => {
  //  this.$message({
    //  type: 'info',
    //  message: '已取消删除'
      // });          
  //  });  
 })
 this.fetchData

}
}
}
   

  





















   



</script>
